<template>
  <div class="containers">
    <div class="container-search">
      <el-form
        :model="formInline"
        label-position="left"
        class="demo-form-inline"
        style="position: relative"
        @submit.native.prevent
      >
        <el-row class="container-search-row">
          <el-col :span="24">
            <el-form-item label="流水号或标题">
              <el-input
                v-model="formInline.serialNumber"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item
              :class="['btn-box', showHighSearch ? 'btn-box-show' : '']"
            >
              <el-button
                type="primary"
                @click="handleSearchBtn"
              >查询</el-button>
              <el-button
                :icon="
                  showHighSearch ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
                "
                @click="handleTiggleSearch"
              >
                高级查询
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="showHighSearch" class="container-search-row high-search-row">
          <el-form-item class="el-form-item-radius" label="流程">
            <el-select
              v-model="formInline.condition.flowId"
              filterable
              clearable
              class="search-form-item"
              placeholder="请选择"
            >
              <el-option
                v-for="i in dictOptions.flowIdsLists"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item class="el-form-item-radius" label="发起人">
            <el-select
              v-model="formInline.condition.createUserId"
              filterable
              clearable
              class="search-form-item"
              placeholder="请选择"
            >
              <el-option
                v-for="i in dictOptions.allUserLists"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="el-form-item-radius" label="当前处理人">
            <el-select
              v-model="formInline.condition.currentUserId"
              filterable
              clearable
              class="search-form-item"
              placeholder="请选择"
            >
              <el-option
                v-for="i in dictOptions.allUserLists"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item class="el-form-item-radius" label="部门">
            <el-input
              v-model="formInline.condition.departmentId"
              clearable
              class="search-form-item"
              placeholder="部门"
            />
          </el-form-item> -->

          <el-form-item class="el-form-item-radius" label="工单状态">
            <el-select
              v-model="formInline.condition.orderStatus"
              clearable
              class="search-form-item"
              placeholder="请选择"
            >
              <el-option
                v-for="i in dictOptions.orderStatusLists"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="el-form-item-radius" label="当前步骤名称">
            <el-input
              v-model="formInline.condition.orderTaskName"
              clearable
              class="search-form-item"
              placeholder="当前步骤名称"
            />
          </el-form-item>
          <el-form-item class="el-form-item-radius" label="发起时间范围">
            <el-date-picker
              ref="dataPickerRef"
              v-model="formInline.condition.createTimeRange"
              class="data-picker-radius"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '00:00:00']"
            />
          </el-form-item>
          <el-form-item class="el-form-item-radius" label="更新时间范围">
            <el-date-picker
              ref="dataPickerRef"
              v-model="formInline.condition.updateTimeRange"
              class="data-picker-radius"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '00:00:00']"
            />
          </el-form-item>
          <el-button type="primary" @click="handleSearchBtn">查询 </el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </el-form>
    </div>
    <hk-table
      :loading="loading"
      :is-need-index="true"
      :selection="false"
      :select-fn="selectFn"
      :total="total"
      :operate="false"
      :common-fixed="true"
      table-height="80px"
      :operate-width="300"
      :table-data="tableData"
      :show-overflow-tooltip="true"
      :table-columns="tableLabelLists"
      :show-index="true"
      :query-params="queryParams"
      @handleSelectionChange="handleSelectionChange"
      @changePage="getListData"
    >
      <template #operate="scope">
        <!-- 是否显示处理  currentUserId == 当前登录用户的 ID  -->
        <el-button
          v-if="scope.row.row.isHandle==true"
          type="text"
          @click="handleDetail(scope.row.row)"
        >处理</el-button>
        <!--  <el-button
          v-if="scope.row.row.orderStatus != 3 && scope.row.row.cancellation==1 && !scope.row.row.isSystem"
          type="text"
          @click="handleRevoke(scope.row.row)"
        >撤销</el-button>
        <el-button
          v-if="!scope.row.row.isSystem"
          type="text"
          @click="handleCopy(scope.row.row)"
        >复制</el-button> -->
        <el-button
          v-if="scope.row.row.orderStatus != 3 && scope.row.row.isReassignment==1"
          type="text"
          @click="handleTransfer(scope.row.row)"
        >强制转派</el-button>
      </template>
      <template #orderStatus="{ row }">
        <span>{{ setOrderStatus(row.row.orderStatus) }}</span>
      </template>
      <!--  工单标题 -->
      <template #orderTitle="{ row }">
        <el-button type="text" style="width:100%;text-align:left" :title="row.row.orderTitle" @click="handleView(row.row)">{{
          row.row.orderTitle
        }}</el-button>
      </template>
      <!--  通知状态 -->
      <template #notifyStatus="{row}">
        <span>{{ row.row.notifyStatus=='none'?'无通知':row.row.notifyStatus=='wait'?'通知中':row.row.notifyStatus=='success'?'成功':row.row.notifyStatus=='error'?'失败':row.row.notifyStatus=='partial_success'?'部分成功':'' }}</span>
      </template>
      <!--  当前处理人 -->
      <template #currentUserName="{row}">
        <span :title="row.row.currentUserName" class="text-elip">{{ row.row.currentUserName }}</span>
      </template>
    </hk-table>
    <transfer-dialog ref="transferDialogRef" />
    <remark-dialog
      ref="remarkDialogRef"
      @handleSubmit="handleSubmit"
    />
  </div>
</template>

<script>
import HkTable from '@/components/Hk-Table'
import transferDialog from './transferDialog'
import remarkDialog from './remarkDialog'
import {
  queryList,
  listAllFlowMap,
  getAllUser,
  deleteWork,
  revokeWork
} from '@/api/dispose/workbenchList.js'
export default {
  name: 'DisposeList',
  components: { HkTable, transferDialog, remarkDialog },
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false
    next()
  },
  data() {
    return {
      loading: false,
      showHighSearch: false,
      formInline: {
        condition: {}
      },
      dictOptions: {
        orderStatusLists: [
          // { label: "已删除", value: -1 },
          { label: '处理中', value: 1 },
          { label: '已完成', value: 2 }
          // { label: '已撤销', value: 3 },
        ],
        flowIdsLists: [],
        allUserLists: []
      },
      queryParams: {
        current: 1,
        size: 10
      },
      checkNodes: [],
      tableData: [],
      tableLabelLists: [
        { label: '流水号', param: 'serialNumber', width: '160' },
        { label: '工单标题', param: 'orderTitle', width: '200', type: 'slot' },
        { label: '流程名称', param: 'flowName', width: '240' },
        { label: '工单状态', param: 'orderStatus', type: 'slot', width: '110' },
        { label: '发起人', param: 'createUserName', width: '140' },
        { label: '发起时间', param: 'createTime', width: '200' },
        { label: '当前步骤', param: 'orderTaskName', width: '210' },
        { label: '当前处理人', param: 'currentUserName', width: '140', type: 'slot' },
        { label: '更新时间', param: 'updateTime', width: '200' },
        { label: '通知状态', param: 'notifyStatus', type: 'slot' }
      ],
      title: '新建',
      total: 0,
      allFlowMapLists: [],
      currentRow: null
    }
  },
  activated() {
    this.getListData()
  },
  mounted() {
    this.getListData()
    this.getListAllFlowMap()
    this.getAllUserLists()
  },
  methods: {
    // 获取流程列表
    getListAllFlowMap() {
      listAllFlowMap().then((res) => {
        this.allFlowMapLists = res
        //  流程下拉框
        this.dictOptions.flowIdsLists = this.allFlowMapLists.map((i, index) => {
          for (const key in i) {
            return { label: key, value: JSON.stringify(index) }
          }
        })
      })
    },
    //  获取所有用户
    getAllUserLists() {
      getAllUser().then((res) => {
        this.dictOptions.allUserLists = res.map((i) => {
          return { label: i.name, value: i.id }
        })
      })
    },
    //  获取列表数据
    getListData() {
      this.loading = true
      let flowIds = []
      if (this.formInline.condition && this.formInline.condition.flowId) {
        flowIds = Object.values(
          this.allFlowMapLists[this.formInline.condition.flowId]
        )[0]
      }
      queryList(
        Object.assign(
          {
            serialNumber: this.formInline.serialNumber,
            flowProcessIds: flowIds,
            catalogueIds: ['1645593678612742145']
          },
          this.queryParams,
          this.formInline.condition
        )
      ).then((res) => {
        this.loading = false
        this.tableData = res.list
        this.total = res.total
      })
    },
    //  新建按钮
    handleAddList() {
      this.$router.push({
        path: window.prefix + '/dispose/listCreate',
        query: { type: 'add' }
      })
    },
    // 删除按钮
    handleDelList() {
      const _this = this
      this.$modal
        .confirm('是否确认删除所选数据项？')
        .then(function() {
          // const ids = _this.checkNodes.map((i) => i.serialNumber).join(',')
          const ids = _this.checkNodes.map((i) => i.serialNumber)
          return deleteWork(ids)
        })
        .then(() => {
          this.$modal.msgSuccess('删除成功')
          this.getListData()
        })
    },
    // 列表多选项
    handleSelectionChange(val) {
      this.checkNodes = val
    },

    // 高级查询项显示
    handleTiggleSearch() {
      this.showHighSearch = !this.showHighSearch
    },
    //  高级查询
    handleSearchBtn() {
      this.queryParams.current = 1
      this.getListData()
    },
    //  高级重置
    handleReset() {
      this.formInline = {
        serialNumber: '',
        condition: {}
      }
      this.getListData()
    },
    //  设置工单状态
    setOrderStatus(status) {
      const currentStatusArr = this.dictOptions.orderStatusLists.filter((i) => {
        return status == i.value
      })
      return currentStatusArr[0].label
    },
    //  查看工单
    handleView(row) {
      console.log(row)
      this.$router.push({
        path: window.prefix + '/dispose/listInfo',
        query: {
          serialNumber: row.serialNumber,
          type: 'view',
          title: row.orderTitle
        }
      })
    },
    //  处理事件
    handleDetail(row) {
      this.$router.push({
        path: window.prefix + '/dispose/listInfo',
        query: {
          serialNumber: row.serialNumber,
          type: 'handle',
          title: row.orderTitle
        }
      })
    },
    //  撤销事件
    handleRevoke(row) {
      this.currentRow = row
      this.$confirm('确定撤销此工单', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          revokeWork({ serialNumber: this.currentRow.serialNumber }).then(
            (res) => {
              this.$message.success('撤销成功')
              this.getListData()
            }
          )
        })
        .catch(() => {})
    },
    // 撤销评论关闭
    handleSubmit(res) {
      revokeWork({ ...res, serialNumber: this.currentRow.serialNumber }).then(
        (res) => {
          this.$message.success('撤销成功')
          this.getListData()
        }
      )
    },
    //  复制
    handleCopy(row) {
      this.$router.push({
        path: window.prefix + '/dispose/listCreate',
        query: { type: 'copy', id: row.id }
      })
    },
    //  强制转派
    handleTransfer(row) {
      this.$refs.transferDialogRef.show(row.id, row.serialNumber)
    },
    //  判断是否显示操作列
    isShowOperate() {
      if (this.tableData.length > 0) {
        const arr = this.tableData.filter(i => {
          return i.isHandle == true || (i.orderStatus != 3 && i.isReassignment == 1)
        })
        if (arr.length == 0) {
          return false
        } else {
          return true
        }
      } else {
        return false
      }
    },
    // 复选框是否禁用
    selectFn(row, index) {
      return row.orderStatus !== 1 && row.isSystem == false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__fixed-body-wrapper{
  top:40px !important;
}
::v-deep .cell .el-button--medium{
  span{
    width:100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
::v-deep .el-form-item{
  margin-bottom:0 !important;
}
::v-deep .targetTable .el-table{
overflow: hidden !important;
}
.containers {
  padding:20px 20px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  .targetTable{
    flex:1;
  }
}
.text-elip{
  display:block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; //禁止换行
}
</style>
